<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/useEcharts'
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String,
      default: '400px',
    },
    height: {
      type: String,
      default: '400px',
    },
    chartDetailData: {
      type: Object,
      default: () => ({}),
    },
  })

  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
  function init() {
    setOptions({
      color: ['#49F756', '#FE606D', '#5066E1'],
      legend: {
        bottom: 0,
      },
      label: {
        show: true,
        formatter: (e) => {
          return `${e.data.name}  ${e.data.amount}次 ${e.data.percent * 100}%`
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          data: props.chartDetailData as any,
          // formatter
        },
      ],
    })
  }
  watch(
    () => props.chartDetailData,
    (val) => {
      init()
    },
    {
      immediate: true,
    }
  )
</script>
